<!-- 金牌零工规则 -->
<template>
	<view class="goldRule" :style="{margin: `${userIdentity==3&&bannerList[0]? '90rpx':margin} auto`}">
		<view class="goldRule-title"> 零工规则</view>
		<view class="goldRule-text">
			<text class=""> 金牌零工说明: </text>
			<text class="">1.金牌零工是雇员 2次 晋升身份，可通过保留任务保留身份，不可再晋升身份。 </text>
			<text class="">2.金牌零工权益 <view class="titlle">
					<text>①每日 12次 报名次数</text>
					<text> ②可接取金牌任务/普通任务</text>
					<text> ③只可同时接取 3单 任务</text>
					<text> ④每次提现免费</text>
				</view>
			</text>
			<text> 3.金牌零工成长周期为 晋升金牌( 30天 晋升期) - 保留金牌( 30天保留期) </text>
			<text class=""> 晋升金牌需要 <view class="">
					<text style="display: block;"> 1）保证金(首次 200元，第2次 300元， 3次及以上 500元) </text>
					<text style="display: block;"> 2）专属培训 </text>
					<text style="display: block;"> 3）晋升任务 <view class="de">
							<text>①完成 5单 (无差评订单)</text>
							<text>②工时满足 30小时</text>
							<text> ③雇主数满足 2人</text>
							<text> ④评分始终保持大于 60分</text>
						</view>
					</text>
					<text> 4）等级晋升期结束 </text>
				</view>
			</text>
			<text class=""> 保留金牌需要 <view class="de">
					<text>1）保留任务 <view class="">
							<text> ①完成 8单 (无差评订单)</text>
							<text> ②工时满足 56小时</text>
							<text> ③雇主数满足 5人</text>
							<text> ④评分始终保持大于 60分</text>
						</view>
					</text>
					<text> 2）等级保留期结束 </text>
				</view>
			</text>
			<text class="">4.晋升/保留周期内都享受金牌权益。</text>
			<text>5.晋升/保留失败，保证金返还。金牌身份生效中，保证金不返还。</text>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default ({
		name: 'goldRule',
		props: {
			userIdentity: {
				type: Number,
				default: 0
			},
			bannerList: {
				type: Array,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {}
		},
		methods: {},
		onload() {},
		computed: {
			...mapState(['margin']),
		},
	})
</script>
<style lang="scss">
	.goldRule {
		width: 694rpx;
		background: #3A3A3A;
		box-shadow: 0rpx 6rpx 24rpx 2rpx rgba(32, 30, 30, 0.64), inset 1rpx 1rpx 0rpx 2rpx rgba(192, 195, 203, 0.57);
		border-radius: 24rpx;
		overflow: hidden;
		padding: 30rpx 0;

		&-title {
			width: 100%;
			font-size: 32rpx;
			font-weight: bold;
			color: #E6E6E6;
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			margin-top: 30rpx;
		}

		&-title::before {
			content: '';
			width: 40rpx;
			height: 4rpx;
			background: #9699A3;
			border-radius: 30rpx;
			opacity: 1;
			display: block;
			margin-right: 30rpx;
		}

		&-title::after {
			content: '';
			display: block;
			width: 40rpx;
			height: 4rpx;
			background: #9699A3;
			border-radius: 30rpx;
			opacity: 1;
			margin-left: 30rpx;
		}

		&-text {
			font-size: 32rpx;
			font-weight: 400;
			color: #E6E6E6;
			line-height: 50rpx;
			display: flex;
			flex-direction: column;
			margin: 30rpx;
			font-weight: 400;

			&>text {
				margin-bottom: 30rpx;
			}

			text:nth-child(5) {
				view {
					.de {
						display: flex;
						flex-direction: column;
						text-indent: 1em;
					}
				}
			}

			text:nth-child(6) {
				.de {
					view {
						display: flex;
						flex-direction: column;
						text-indent: 1em;
					}
				}
			}
		}
	}

	.titlle {
		display: flex;
		flex-direction: column;
	}
</style>